<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{width: 100px;height: 100px;background: red;position: absolute;}
    </style>
    <script>
        /*
            拖拽:
                mousedown
                    记录鼠标按下位置和被拖拽物体相对距离
                    var offsetX = e.clientX - node.offsetLeft;
                    var offsetY = e.clientY - node.offsetTop;
                mousemove
                    一致保持，相对距离
                    node.style.left = e.clientX - offsetX + 'px';
                    node.style.top = e.clientY - offsetY + 'px';
                mouseup
                    取消拖拽
            
            当前窗口的高和宽 document.documentElement.clientWidth||document.body.clientWidth

        */
       window.onload = function(){
           var oDiv = document.getElementById("div1");
           drag(oDiv);
       }
        function drag(node){
            node.onmousedown = function(ev){
                var e = ev||window.event;
                var offsetX = e.clientX - node.offsetLeft;
                var offsetY = e.clientY - node.offsetTop;
                document.onmouseover = function(ev){
                    var e = ev||window.event;
                    node.style.left = e.clientX - offsetX +'px';
                    node.style.top = e.clientY - offsetY +'px';
                }
            }
            document.onmouseup = function(){
                document.onmousemove = null;
            }
        }
    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>